<!-- dashboard.html -->
<div class="main-content">
  <div class="top-nav">
    <div>
      <button class="btn btn-primary" id="toggleSidebar">
        <i class="fas fa-bars"></i>
      </button>
    </div>
    <div class="user-info">
      <img src="https://via.placeholder.com/40" alt="用户头像">
      <span>北极星</span>
    </div>
  </div>

  <div class="stats-cards">
    <div class="stats-card">
      <h3>28</h3>
      <p>进行中项目</p>
    </div>
    <div class="stats-card">
      <h3>52</h3>
      <p>已完成项目</p>
    </div>
    <div class="stats-card">
      <h3>12</h3>
      <p>待处理留言</p>
    </div>
    <div class="stats-card">
      <h3>3.2K</h3>
      <p>本月访问量</p>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>最近活动</h3>
    </div>
    <div class="card-body">
      <div class="activity-list">
        <div class="activity-item">
          <div class="activity-icon">
            <i class="fas fa-project-diagram text-primary"></i>
          </div>
          <div class="activity-content">
            <p><strong>电商平台开发</strong> 项目状态更新为 <span class="text-primary">进行中</span></p>
            <small class="text-muted">2小时前</small>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon">
            <i class="fas fa-comment text-success"></i>
          </div>
          <div class="activity-content">
            <p><strong>李四</strong> 提交了新的咨询留言</p>
            <small class="text-muted">昨天 14:30</small>
          </div>
        </div>
        <div class="activity-item">
          <div class="activity-icon">
            <i class="fas fa-check-circle text-success"></i>
          </div>
          <div class="activity-content">
            <p><strong>企业官网改版</strong> 项目已完成</p>
            <small class="text-muted">2023-12-01</small>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>项目进度</h3>
    </div>
    <div class="card-body">
      <div class="progress-container">
        <div class="progress-item">
          <p>电商平台开发 <span class="float-right">75%</span></p>
          <div class="progress">
            <div class="progress-bar" style="width: 75%;"></div>
          </div>
        </div>
        <div class="progress-item">
          <p>移动应用开发 <span class="float-right">45%</span></p>
          <div class="progress">
            <div class="progress-bar" style="width: 45%;"></div>
          </div>
        </div>
        <div class="progress-item">
          <p>数据分析平台 <span class="float-right">30%</span></p>
          <div class="progress">
            <div class="progress-bar" style="width: 30%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .activity-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
  }

  .activity-item:last-child {
    border-bottom: none;
  }

  .activity-icon {
    font-size: 20px;
    margin-top: 3px;
  }

  .activity-content p {
    margin-bottom: 5px;
  }

  .text-primary {
    color: var(--primary-color);
  }

  .text-success {
    color: var(--success-color);
  }

  .text-muted {
    color: #7f8c8d;
  }

  .progress-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .progress {
    height: 8px;
    background-color: #ecf0f1;
    border-radius: 4px;
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 4px;
  }
</style>